<template>
  <div class="equipment-details">
    <div class="query-container">
      <el-form inline
               label-width="90px">
        <el-form-item label="设备编码"
                      class="form-input-width">
          <el-input v-model="queryParams.devCode"
                    placeholder="请输入设备编码"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="是否在公司"
                      class="form-input-width">
          <el-select v-model="queryParams.inHome"
                     placeholder="请选择是否在公司"
                     @clear="clearInHome">
            <el-option v-for="item in inHomeList"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="设备状态"
                      class="form-input-width">
          <el-select v-model="queryParams.status"
                     placeholder="请选择设备状态">
            <el-option v-for="item in queryParams.inHome == 2
                ? statusList2
                : queryParams.inHome == 1
                ? statusList1
                : queryParams.inHome === 0
                ? statusList0
                : defaultStatusList"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary"
                     icon="el-icon-search"
                     @click="pageNo = 1; search()">查询</el-button>
          <el-button type="primary"
                     icon="el-icon-delete"
                     @click="resetForm">清除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="bottom-container">
      <el-form>
        <el-form-item style="float: right">
          <el-button type="default"
                     @click="downLoad">导入</el-button>
          <el-button type="default"
                     icon="el-icon-s-promotion"
                     @click="handleExport">导出</el-button>
        </el-form-item>
      </el-form>
      <el-table ref="table"
                class="table-container"
                stripe
                border
                height="66vh"
                :data="tableData">
        <el-table-column label="设备编码"
                         prop="iMEICode"
                         align="left">
          <template slot-scope="scope">
            <span>{{ scope.row.iMEICode ? scope.row.iMEICode : "--" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="使用状态"
                         prop="useStatus"
                         align="left">
          <template slot-scope="scope">
            <span>{{ scope.row.useStatus ? scope.row.useStatus : "--" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="最后绑定合同编号"
                         prop="pactCode"
                         align="left">
          <template slot-scope="scope">
            <span>{{ scope.row.pactCode ? scope.row.pactCode : "--" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="最后绑定订单线路"
                         prop="lastBindRoute"
                         align="left">
          <template slot-scope="scope">
            <span>{{
              scope.row.lastBindRoute ? scope.row.lastBindRoute : "--"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="最后位置"
                         prop="lastPosition"
                         show-overflow-tooltip
                         align="left">
          <template slot-scope="scope">
            <span :style="
                scope.row.lastPosition
                  ? 'color: var(--prev-color-primary);cursor: pointer'
                  : 'color: var(--prev-color-text-darkgrey)'
              "
                  @click="lastPosition(scope.row)">{{
                scope.row.lastPosition ? scope.row.lastPosition : "--"
              }}</span>
          </template>
        </el-table-column>
        <el-table-column label="最后定位时间"
                         prop="lastPositionTime"
                         show-overflow-tooltip
                         align="left">
          <template slot-scope="scope">
            <span>{{
              scope.row.lastPositionTime ? scope.row.lastPositionTime : "--"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="指标"
                         prop="target"
                         align="left">
          <template slot-scope="scope">
            <div class="target-power">
              <span :style="
                  parseInt(scope.row.lithiumValue) > 20
                    ? 'color: #08C172'
                    : 'color: red'
                ">{{ scope.row.lithiumValue }}</span>
              <span v-show="scope.row.status">&nbsp;|&nbsp;<span :style="
                    scope.row.status == '在线'
                      ? 'color: #08C172'
                      : 'color: var(--prev-border-color-lightgrey)'
                  ">{{ scope.row.status }}</span>
              </span>
              <div v-show="scope.row.charging == 1"
                   class="power">
                <span>&nbsp;|&nbsp;</span>
                <icon-svg icon-name="chongdian" />
              </div>
            </div>
            <span v-show="
                !scope.row.lithiumValue &&
                !scope.row.status &&
                !scope.row.charging
              ">--</span>
          </template>
        </el-table-column>
        <el-table-column label="是否在公司"
                         prop="inHome"
                         align="left">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.inHome"
                       active-color="#13ce66"
                       inactive-color="#DCDFE6"
                       :active-value="1"
                       :inactive-value="0"
                       @change="handleSwitch(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="最后调度承运方"
                         prop="lastSupplierName"
                         align="left">
          <template slot-scope="scope">
            <span>{{
              scope.row.lastSupplierName ? scope.row.lastSupplierName : "--"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="最后调度时间"
                         prop="lastDispatchTime"
                         show-overflow-tooltip
                         align="left">
          <template slot-scope="scope">
            <span>{{
              scope.row.lastDispatchTime ? scope.row.lastDispatchTime : "--"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="设备状态"
                         prop="invalidStr"
                         align="left">
          <template slot-scope="scope">
            <span>{{
              scope.row.invalidStr ? scope.row.invalidStr : "--"
            }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-show="tableData.length > 0"
                     background
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"
                     :page-sizes="pageSizeOptions"
                     :page-size.sync="pageSize"
                     :current-page.sync="pageNo"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script src="./EquipmentDetails.js"></script>

<style scoped>
.table-container >>> .el-table__body-wrapper {
  /* height: 100%; */
  overflow-y: scroll;
}
.bottom-container >>> .el-pagination {
  margin-top: 20px;
  /* text-align: right; */
}
.bottom-container >>> .el-table tr {
  background-color: var(--prev-bg-white);
  height: 50px;
  font-size: 14px;
}
.equipment-details >>> .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border-bottom: 1px solid var(--prev-border-color-lighter);
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 20px;
  color: #333333;
  opacity: 1;
}
.form-input-width >>> .el-input--small .el-input__inner {
  height: 36px;
  line-height: 36px;
}
</style>
<style lang="scss" scoped>
.query-container ::v-deep .el-form-item--small.el-form-item {
  margin-bottom: 10px !important;
}
.equipment-details {
  width: 100%;
  height: 100%;
  .query-container {
    padding: 20px 20px 12px 20px;
    background: var(--prev-bg-white);
    box-shadow: 0px 3px 6px rgba(35, 35, 35, 0.16);
  }
  .bottom-container {
    padding: 20px;
    margin-top: 5px;
    background: var(--prev-bg-white);
    height: calc(100vh - 220px);
    box-shadow: 0px 3px 6px rgba(35, 35, 35, 0.16);
    .table-container {
      height: calc(100% - 100px);
      .target-power {
        display: flex;
        .power {
          display: flex;
          align-items: center;
        }
      }
    }
  }
}
</style>
